<template>
  <div class="tabbar">
    <ul>
      <li
        v-for="(item,index) in routerList"
        :key="index"
        @click="switchTab(item.path)"
      >
        <img :src="$route.path === item.path ? item.selected : item.active" alt="">
        <span v-text="item.title" :class="$route.path === item.path ? 'selected' : ''"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data () {
    return {
      routerList: [
        {
          title: '首页',
          path: '/home',
          active: './img/home.png',
          selected: './img/home-selected.png'
        },
        {
          title: '分类',
          path: '/list',
          active: './img/list.png',
          selected: './img/list-selected.png'
        },
        {
          title: '购物车',
          path: '/cart',
          active: './img/cart.png',
          selected: './img/cart-selected.png'
        },
        {
          title: '我的',
          path: '/my',
          active: './img/my.png',
          selected: './img/my-selected.png'
        }

      ]
    }
  },
  methods: {
    switchTab (path) {
      if (this.$route.path === path) {
        return false
      }
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width:  100%;
  height: 1.333333rem;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 9999;
  ul {
    display: flex;
    justify-content: space-around;
    margin-top: .133333rem;
    margin-bottom: .133333rem;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: .533333rem;
        height: .533333rem;
      }
      span {
        font-size: .373333rem;
      }
      .selected {
        color: red;
      }
    }
  }
}
</style>
